<template>
	<view :data-theme="theme">
		<tui-skeleton v-if="showSkeleton"></tui-skeleton>
		<view v-if="productDetail" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<view class="bg_color" style="height: 200rpx;width: 100%;"></view>
			<view class="card" style="margin-top: -180rpx;padding: 10px 10px 0 10px;">
				<view style="display: flex;">
					<view style="flex-flow: row;display: flex;">
						<view style="flex: 1;">
							<u--image :radius="5" :showLoading="true" :src="productDetail.image" width="80px"
								height="80px"></u--image>
						</view>
						<view style="flex: 3;align-items: center;justify-items: center;">
							<view style="display: flex;flex-flow: column;flex: 1;margin: 6px 6px 0 6px;">
								<text class="u-line-1"
									style="font-size: 16px;font-weight: bold;">{{productDetail.name}}</text>
								<view class="name-param" style="display: flex;flex-flow: row;">
									<text style="font-size: 14px;color: #999;margin-right: 10px;">商品编码</text>
									<text>{{productDetail.id}}</text>
								</view>
								<view class="name-param" style="display: flex;flex-flow: row;">
									<text style="font-size: 14px;color: #999;margin-right: 10px;">商品类目</text>
									<text>{{categoryname}}</text>
								</view>
								<view class="name-param" style="display: flex;flex-flow: row;">
									<text style="font-size: 14px;color: #999;margin-right: 10px;">商品单位</text>
									<text>{{productDetail.unitName ? productDetail.unitName : '-'}}</text>
								</view>
								<view v-for="(value,key,index) in specParamMap" class="name-param"
									style="display: flex;flex-flow: row;">
									<text style="font-size: 14px;color: #999;margin-right: 10px;">{{key}}</text>
									<text>{{value}}</text>
								</view>
								<!-- <view style="margin-top:10px;border-bottom: 1px solid #ddd"></view> -->
							</view>
						</view>

					</view>
				</view>
				<!-- <view style="margin-top:10px;border-bottom: 1px solid #ddd"></view> -->
				<view style="margin:40rpx 0 40rpx 0;border-bottom: 1px solid #eee"></view>
				<!-- 商品规格 -->
				<view style="margin: 10px 0 10px 0">
					<!-- （选项数量小于4个) -->
					<view v-if="skuArr.length <= 4" class="sku-select1">
						<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
							<view class="flex-text" :class='item.sku == attrValue.sku?"right-class-active":""'
								v-for="(item,index) in skuArr" :key="index" @click='tapAttr(item)'>{{item.sku}}</view>
						</view>
					</view>
					<!-- （选项数量大于4个）如果是大于超出2行高度则显示横向滚动条 -->
					<view v-else class="sku-select2">
						<scroll-view class="scroll-content" scroll-x="true" :scroll-with-animation="true">
							<text :class='item.sku == attrValue.sku?"right-class-active":""'
								v-for="(item,index) in skuArr" :key="index" @click='tapAttr(item)'>
								{{item.sku}}
							</text>
						</scroll-view>
					</view>
				</view>
				<!-- 商品信息tab -->
				<!-- <tab-bar :isScroll="false" :tabList="tabList" :tabIndex.sync="tabIndex" ></tab-bar> -->
				<!-- <u-tabs :scrollable="false" :list="tabList" :current="tabIndex" @click="tabClick"
					:activeStyle="{color:bgColor}" :lineColor="bgColor"></u-tabs> -->
				<!-- 标签页 -->
				<uni-section>
					<view class="uni-padding-wrap uni-common-mt">
						<uni-segmented-control :current="tabIndex" :values="items" :style-type="styleType"
							:active-color="bgColor" @clickItem="tabClick" />
					</view>
				</uni-section>
				<!-- 1.商品信息 -->
				<view v-if="tabIndex == 0">
					<!-- 规格，基本信息，图片，库存，编号，重量，体积等 -->
					<view v-if="attrValue" class="product-card">
						<view class="product-title">基本信息</view>
						<!-- <u-row class="product-sku-row">
							<u-col class="title" span="4">规格图片</u-col>
							<u-col span="8">
								<u--image :radius="5" :showLoading="true" :src="attrValue.image" width="40px"
									height="40px"></u--image>
							</u-col>
						</u-row> -->
						<view class="item_content product-sku-row">
							<view class="item_content_left title">规格图片</view>
							<view class="item_content_right">
								<u--image :radius="5" :showLoading="true" :src="attrValue.image" width="40px"
									height="40px"></u--image>
							</view>
						</view>
						<!-- <u-row class="product-sku-row">
							<u-col class="title" span="4">描述</u-col>
							<u-col class="value" span="8">{{attrValue.sku}}</u-col>
						</u-row> -->
						<view class="item_content product-sku-row">
							<view class="item_content_left title">描述</view>
							<view class="item_content_right value">
								{{attrValue.sku}}
							</view>
						</view>
						<!-- 	<u-row class="product-sku-row">
							<u-col class="title" span="4">条码</u-col>
							<u-col class="value" span="8">{{attrValue.barCode}}</u-col>
						</u-row> -->
						<view class="item_content product-sku-row">
							<view class="item_content_left title">条码</view>
							<view class="item_content_right value">
								{{attrValue.barCode ? attrValue.barCode : '—'}}
							</view>
						</view>
						<!-- <u-row class="product-sku-row">
							<u-col class="title" span="4">重量</u-col>
							<u-col class="value" span="8">{{attrValue.weight}}kg</u-col>
						</u-row> -->
						<view class="item_content product-sku-row">
							<view class="item_content_left title">重量</view>
							<view class="item_content_right value">
								{{attrValue.weight}}kg
							</view>
						</view>
						<!-- <u-row class="product-sku-row">
							<u-col class="title" span="4">体积</u-col>
							<u-col class="value" span="8">{{attrValue.volume}}平方</u-col>
						</u-row> -->
						<view class="item_content product-sku-row">
							<view class="item_content_left title">体积</view>
							<view class="item_content_right value">
								{{attrValue.volume}}平方
							</view>
						</view>
						<!-- <u-row class="product-sku-row">
							<u-col class="title" span="4">库存</u-col>
							<u-col class="value" span="8">{{attrValue.stock}}</u-col>
						</u-row> -->
						<!-- <view class="item_content product-sku-row">
							<view class="item_content_left title">库存</view>
							<view class="item_content_right value">
								{{attrValue.stock}}
							</view>
						</view> -->
					</view>
					<view style="margin:0px 0 20px 0;border-bottom: 1px solid #eee"></view>
					<!-- 规格，价格信息 -->
					<view class="product-card">
						<view class="product-title">价格信息</view>
						<!-- <u-row class="product-sku-row">
							<u-col class="title" span="4">售价</u-col>
							<u-col class="value" span="8">
								<u--text mode="price" :text="attrValue.price"></u--text>
							</u-col>
						</u-row> -->
						<view class="item_content product-sku-row">
							<view class="item_content_left title">售价</view>
							<view class="item_content_right value">
								￥{{attrValue.price}}
							</view>
						</view>
						<!-- <u-row class="product-sku-row">
							<u-col class="title" span="4">成本价</u-col>
							<u-col class="value" span="8">
								<u--text mode="price" :text="attrValue.cost"></u--text>
							</u-col>
						</u-row> -->
						<view class="item_content product-sku-row">
							<view class="item_content_left title">成本价</view>
							<view class="item_content_right value">
								￥{{attrValue.cost}}
							</view>
						</view>
						<!-- <u-row class="product-sku-row">
							<u-col class="title" span="4">原价</u-col>
							<u-col class="value" span="8">
								<u--text mode="price" :text="attrValue.otPrice"></u--text>
							</u-col>
						</u-row> -->
						<view class="item_content product-sku-row">
							<view class="item_content_left title">原价</view>
							<view class="item_content_right value">
								￥{{attrValue.otPrice}}
							</view>
						</view>
					</view>

				</view>
				<!-- 2.资质信息 -->
				<view v-else style="padding-bottom: 20rpx;">
					<!-- 商品资质图片 -->
					<view style="padding: 10rpx;" v-for="(item,index) in productCredentials" :key="index">
						<image style="width: 100%;" mode="widthFix" :src="item"></image>
					</view>

				</view>
			</view>
			<view class="card" style="margin-top: 20rpx;padding: 10px 10px 0px;">
				<!-- 商品描述 -->
				<view class="product-card">
					<view class="product-title">商品简介</view>
					<view style="line-height: 20px;">{{productDetail.intro}}</view>
				</view>
				<view style="margin:10px 0 20px 0;border-bottom: 1px solid #eee"></view>
				<!-- 主商品图片，轮播图 -->
				<view class="product-card">
					<view class="product-title">商品图片</view>
					<tab-bar :isScroll="false" :tabList="imageTabList" :tabIndex.sync="currentIndex"></tab-bar>
					<swiper :autoplay="false" @change="changeSwiper" :current.sync="currentIndex"
						:style="{ height: swiperHeight + 'px' }" :duration="300">
						<swiper-item>
							<view :id="'content-wrap0'">
								<view>
									<image style="width: 100%;" mode="widthFix" :src="productDetail.image"></image>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view :id="'content-wrap1'">
								<view>
									<u-album style="align-items: center;" :multipleSize="100" :singleSize="100"
										:urls="sliderImages"></u-album>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view :id="'content-wrap2'">
								<view>
									<!-- <u-parse :content="productDetail.content"></u-parse> -->
									<rich-text :nodes="productDetail.content"></rich-text>
								</view>
							</view>
						</swiper-item>

					</swiper>
					<view style="height: 20rpx;"></view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
				<!-- <u-button @click="toUpdate" style="font-weight: bold;border-radius: 10px;" :color="bgColor" size="large"
					type="primary" text="修改商品"></u-button> -->
				<button @click="toUpdate" class="bg_color"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					:color="bgColor">修改商品</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		categoryApi,
	} from '@/api/product.js';
	import {
		productDetailApi
	} from '@/api/product.js'
	// import tuiSkeleton from '@/components/base/tui-skeleton.vue';
	import tuiSkeleton from '../components/tui-skeleton.vue';
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	import animationType from '@/utils/animationType.js'
	import tabBar from '../components/tab-bar.vue';
	import UniSection from '@/components/uni/uni-swipe-action/uni-swipe-action.vue';
	let app = getApp();
	export default {
		components: {
			tabBar,
			tuiSkeleton,
			'uni-section': UniSection
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				items: ['商品', '资质'],
				tabIndex: 0,
				styleType: 'text', //切换按钮
				showSkeleton: true, //骨架屏显示隐藏
				options: null, //浏览器对象
				id: null, //商品id
				productDetail: null, //商品详情
				specParamMap: null, //规格参数
				sliderImages: [], //轮播图列表
				productCredentials: [], //资质
				skuArr: [],
				attrValue: null,
				// tabList: [],

				imageTabList: [],
				// ----------滑动切屏
				swiperHeight: 0,//滑块的高度(单位px)
				currentIndex: 0,//当前索引
				categoryTree: [], //平台商品分类树
				categoryname:'',
			};
		},
		async onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			// this.tabList = [{
			// 		id: "tab1",
			// 		name: "商品",
			// 		pageid: 1
			// 	},
			// 	{
			// 		id: "tab12",
			// 		name: "资质",
			// 		pageid: 2
			// 	},
			// ];
			this.imageTabList = [{
					id: "tab1",
					name: "商品封面图",
					pageid: 1
				},
				{
					id: "tab2",
					name: "商品轮播图",
					pageid: 2
				},
				{
					id: "tab3",
					name: "商品详情图",
					pageid: 3
				},
			];
			//获取浏览器传来的对象
			this.options = options;

			//获取浏览器中的参数，商品id，商品类型type，普通normal，秒杀seckill，砍价，拼团，视频号video
			if (!options.scene && !options.id) {
				this.showSkeleton = false;
				this.$util.Tips({
					title: '缺少参数无法查看商品'
				}, {
					url: '/pages/index/index'
				});
				return;
			}

			if (options.id) this.id = options.id;

			// 加载 商品 详情 信息等
			this.loadData();
			await this.getCategoryTree();
		},
		onShow() {
			// 加载 商品 详情 信息等
			this.loadData();
		},
		methods: {
			//数据初始化
			async loadData() {
				//加载商品数据
				await this.getProductDetail();
				// TODO 加载需要的其他数据
				//隐藏骨架
				this.showSkeleton = false;
				//动态设置swiper的高度 最后设置！！
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},



			//查询商品详情
			async getProductDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let that = this;
				await productDetailApi(this.id).then(res => {
					if (res.code == 200) {
						that.productDetail = res.data;
						that.skuArr = res.data.attrValue;
						that.attrValue = that.skuArr[0];

						// 格式化商品参数 specParam
						//商品规格参数
						let specParam = that.productDetail.specParam;
						let specParamMap = JSON.parse(specParam);
						that.$set(that, 'specParamMap', specParamMap);
						//商品轮播图
						let sliderImage = that.productDetail.sliderImage;
						let sliderImages = JSON.parse(sliderImage);
						that.$set(that, 'sliderImages', sliderImages);

						let productCredential = that.productDetail.productCredential;
						let productCredentials = JSON.parse(productCredential);
						that.$set(that, 'productCredentials', productCredentials);


					}
					uni.hideLoading();
					//分类的回显
					// for (let i = 0; i < this.categoryTree.length; i++) {
					// 	if (this.categoryTree[i].id == that.productDetail.categoryId) {
					// 		that.categoryname = this.categoryTree[i].name;
					// 		break;
					// 	} else {
					// 		that.categoryname = '未添加';
					// 	}
					// }
					that.categoryname = res.data.categoryName;
				}).catch(err => {
					console.log("upOfDown error", err)
					uni.hideLoading();
				});

			},

			tapAttr(skuItem) {
				this.attrValue = skuItem;

			},
			tabClick(item) {
				// this.tabIndex = item.index;
				this.tabIndex = item.currentIndex;
			},

			//手动切换题目
			changeSwiper(e) {
				// this.currentIndex = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				let element = "#content-wrap" + this.currentIndex;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
					}
				});
			},
			toUpdate() {
				this.goPage(`/pages/product/saveProduct/saveProduct?type=update&id=${this.productDetail.id}`);
			},
			goPage(url) {
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url
				})
			},

			//-----
			//查询平台端商品分类缓存树
			async getCategoryTree() {
				let res = await categoryApi();
				let that = this;
				if (res.code == 200) {
					// this.categoryTree = res.data;
					const result = [];
					for (const item1 of res.data) {
						for (const item2 of item1.childList) {
							for (const item3 of item2.childList) {
								result.push(item3);
							}
						}
					}
					this.categoryTree = result;
				}
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.name-param {
		line-height: 50rpx;
	}

	.sku-select1 {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #f7f7f7;
			line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 10rpx 20rpx;
			font-size: 24rpx;
			border-radius: 10rpx;
			border: 1rpx solid #FFF;
		}

		.right-class-active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 1rpx solid;
		}
	}

	.sku-select2 {
		.scroll-content {
			white-space: nowrap;
			height: 86rpx;

			text {
				margin: 8rpx 8rpx;
				background-color: #f7f7f7;
				line-height: 86rpx;
				text-align: center;
				color: #777;
				padding: 25rpx 20rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				border: 1rpx solid #FFF;
			}

			.right-class-active {
				@include main_color(theme);
				@include main_bg_rgba_color(theme, 0.05);
				border: 1rpx solid;
			}
		}
	}

	.product-card {
		margin-top: 20rpx;
		padding-bottom: 20rpx;

		.product-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}

	.product-sku-row {
		margin-bottom: 20rpx;
		font-size: 15px;

		.title {
			color: #777;
		}

		.value {
			font-weight: bold;
		}
	}

	.item_content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.item_content_left {
			flex: 1;
		}

		.item_content_right {
			flex: 2;
		}
	}
</style>